require("../css/commCss/normalize.less");
require("../css/commCss/reset.less");
require("../css/commCss/property.less");
require("../css/commCss/basic.less");
require("../fonts/iconfont.css");
require("../css/sportData.less");

//axios请求
const axios = require("axios");

//weui-插件库
require("weui");
const weui = require("weui.js");

//echarts
const echarts = require("echarts");

document.addEventListener("DOMContentLoaded", function () {
  /* 获取元素 */
  const sportIcon = document.querySelector("#sportIcon");
  const times = document.querySelector("#times");
  const calorie = document.querySelector("#calorie");
  const sportImg = document.querySelector("#sportImg");
  // const sportTime=document.querySelector("#sportTime")

  //点击sportIcon,返回上一个页面
  sportIcon.addEventListener("click", function () {
    history.go(-1);
  });

  axios
    .get("http://139.9.177.51:8099/users/mysportsBadge", {
      params: {
        userId: localStorage.userId,
      },
    })
    .then(function (res) {
      let user = res.data.data.user;
      let sports = res.data.data.sports;

      //渲染总运动时间
      if (sports.times) {
        times.textContent = sports.times;
      }

      //渲染卡路里
      if (sports.calorie) {
        calorie.textContent = sports.calorie;
      }

      //渲染头像
      sportImg.src = user.imgurl;
    });

  //echarts1
  function setSportTime() {
    //初始化echarts实例
    let myChart = echarts.init(document.querySelector("#sportTime"));

    // 指定图表的配置项和数据
    var option = {
      title: {
        text: "近七天运动时长",
      },
      tooltip: {},
      legend: {},
      xAxis: {
        data: ["11-5", "11-6", "11-7", "11-8", "11-9", "11-10", "11-11"],
        axisLabel: {
          interval:0,
          rotate:0
       },
      },
      yAxis: {},
      series: [
        {
          type: "bar",
          data: [30, 80, 36, 120, 70, 20, 140],
          color: "#83A7D1",
        },
      ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  }
  setSportTime();

  //echarts2
  function setSportSort() {
    //初始化echarts实例
    let myChart = echarts.init(document.querySelector("#sportSort"));

    // 指定图表的配置项和数据
    option = {
      title: {
        text: "运动分类",
      },
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: "vertical",
        left: "left",
        top: "middle",
        icon: "rect",
        itemWidth: 8,
        itemHeight: 8,
      },
      series: [
        {
          name: "Access From",
          type: "pie",
          label: {
            position: "inside",
            formatter: "{d}%",
            color: "#fff",
          },

          data: [
            { value: 1048, name: "跑步", itemStyle: "#736171" },
            { value: 735, name: "骑行" },
            { value: 580, name: "训练" },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  }
  setSportSort();

  //echarts3
  function setSportBar() {
    //初始化echarts实例
    let myChart = echarts.init(document.querySelector("#sportBar"));

    // 指定图表的配置项和数据
    var option = {
      title: {
        text: "近七日运动分类",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // Use axis to trigger tooltip
          type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
        },
      },
      legend: {
        left: "right",
        top: "middle",
        orient: "vertical",
        align: "left",
        icon: "rect",
        itemWidth: 8,
        itemHeight: 8,
        padding:[0,10,0,0]
      },
      grid: {
        left: "3%",
        right: "20%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: {
        type: "value",
      },
      yAxis: {
        type: "category",
        data: ["11-5", "11-6", "11-7", "11-8", "11-9", "11-10", "11-11"],
      },
      series: [
        {
          name: "跑步",
          type: "bar",
          stack: "total",
          label: {
            show: false,
          },
          emphasis: {
            focus: "series",
          },
          data: [320, 302, 301, 334, 390, 330, 320],
        },
        {
          name: "骑行",
          type: "bar",
          stack: "total",
          label: {
            show: false,
          },
          emphasis: {
            focus: "series",
          },
          data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
          name: "训练",
          type: "bar",
          stack: "total",
          label: {
            show: false,
          },
          emphasis: {
            focus: "series",
          },
          data: [220, 182, 191, 234, 290, 330, 310],
        },
      ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  }
  setSportBar();

  //echarts4
  function setSportLine() {
    //初始化echarts实例
    let myChart = echarts.init(document.querySelector("#sportLine"));

    // 指定图表的配置项和数据
    var option = {
      title: {
        text: "近七日训练次数",
      },
      xAxis: {
        type: "category",
        data: ["11-5","11-6","11-7","11-8","11-9","11-10","11-11"],
        splitLine: {
          show: false,
        },
        axisLabel: {
          interval:0,
          rotate:0
       },
      },
      yAxis: {
        type: "value",
        splitLine: {
          show: false,
        },
      },
      series: [
        {
          symbol:'none',
          data: [150, 230, 224, 218, 135, 147, 260],
          type: "line",
        },
      ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  }
  setSportLine();
});
